<!--Copyright https://gitee.com/laiyw/monitor-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Server Monitor Dashboard</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
    <div class="row" style="margin-top: 10px;">
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        CPU
                    </h3>
                </div>
                <div id="cpu_dashboard" style="height: 300px;"></div>
            </div>
        </div>

        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        系统内存
                    </h3>
                </div>
                <div id="momery_dashboard" style="height: 300px; "></div>
            </div>
        </div>

        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Java虚拟机内存
                    </h3>
                </div>
                <div id="jvm_momery_dashboard" style="height: 300px; "></div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        磁盘读写速度
                    </h3>
                </div>
                <div id="diskrw" style="height: 320px;"></div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf8"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf8"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf8"></script>
<script type="text/javascript">
    $.namespace("monitor.index");
    var cpuChart, cpuOptions, sysChart, sysOptions, jvmChart, jvmOptions;
    monitor.index = function () {
        return {
            init: function () {
                this.initDashboard();
                this.initDiskLine();
                monitor.common.buildHeadAndInitInterval(0, this.ajax);
                console.log("%cCopyright https://gitee.com/laiyw/monitor", "color:red");
            },
            ajax: function () {
                $.ajax({
                    type: 'POST',
                    url: 'dashboard.json',
                    dataType: "json",
                    success: function (data) {
                        monitor.index.setDashboardValue(cpuChart, cpuOptions, data.cpuUsedPercent);
                        monitor.index.setDashboardValue(sysChart, sysOptions, data.sysUsedPercent);
                        monitor.index.setDashboardValue(jvmChart, jvmOptions, data.jvmUsedPercent);
                    }
                });
            },
            setDashboardValue: function (chart, option, value) {
                option.series[0].data[0].value = value;
                chart.setOption(option, true);
            },
            initDashboard: function () {
                //--------------cpu-----------------------
                cpuChart = echarts.init(document.getElementById('cpu_dashboard'));
                cpuOptions = {
                    toolbox: {
                        show: true,
                        feature: {
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    series: [{
                        name: 'CPU',
                        type: 'gauge',
                        detail: {formatter: '{value}%'},
                        data: [{value: 0}]
                    }]
                };
                cpuChart.setOption(cpuOptions);

                //--------------sys-----------------------
                sysChart = echarts.init(document.getElementById('momery_dashboard'));
                sysOptions = {
                    toolbox: {
                        show: true,
                        feature: {
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    series: [{
                        name: 'Momery',
                        type: 'gauge',
                        detail: {formatter: '{value}%'},
                        data: [{value: 0}]
                    }]
                };
                sysChart.setOption(sysOptions);

                //--------------jvm-----------------------
                jvmChart = echarts.init(document.getElementById('jvm_momery_dashboard'));
                jvmOptions = {
                    toolbox: {
                        show: true,
                        feature: {
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    series: [{
                        name: 'JVM',
                        type: 'gauge',
                        detail: {formatter: '{value}%'},
                        data: [{value: 0}]
                    }]
                };
                jvmChart.setOption(jvmOptions);
            },
            initDiskLine: function () {
                var myChart = echarts.init(document.getElementById('diskrw'));
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#283b56'
                            }
                        }
                    },
                    legend: {
                        data: ['Read', 'Write']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: true,
                            data: (function () {
                                var now = new Date();
                                var res = [];
                                var len = 0;
                                while (len < 10) {
                                    res.unshift(now.toTimeString().replace(/\ G(.*)/, ''));
                                    now = new Date(now - 1000);
                                    len++
                                }
                                return res;
                            })()
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            scale: true,
                            name: 'M/s',
                            max: 100,
                            min: 0,
                            boundaryGap: [0.2, 0.2]
                        },
                        {
                            type: 'value',
                            scale: true,
                            name: 'M/s',
                            max: 100,
                            min: 0,
                            boundaryGap: [0.2, 0.2]
                        }
                    ],
                    series: [
                        {
                            name: 'Write',
                            type: 'line',
                            data: (function () {
                                var res = [];
                                var len = 10;
                                while (len--) {
                                    res.push(Math.round(Math.random() * 100));
                                }
                                return res;
                            })()
                        },
                        {
                            name: 'Read',
                            type: 'line',
                            data: (function () {
                                var res = [];
                                var len = 0;
                                while (len < 10) {
                                    res.push((Math.random() * 10 + 5).toFixed(1) - 0);
                                    len++;
                                }
                                return res;
                            })()
                        }
                    ]
                };
                myChart.setOption(option);

                setInterval(function () {
                    axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

                    var data0 = option.series[0].data;
                    var data1 = option.series[1].data;
                    data0.shift();
                    data0.push(Math.round(Math.random() * 100));
                    data1.shift();
                    data1.push((Math.random() * 100 + 5).toFixed(2) - 0);

                    option.xAxis[0].data.shift();
                    option.xAxis[0].data.push(axisData);

                    myChart.setOption(option);
                }, 1000);
            }
        }
    }();

    $(document).ready(function () {
        monitor.index.init();
    });
</script>
</body>
</html>